{extend name='table'}

{block name='style'}
<style>
    .layui-card-table {
        height: 100%;
    }
    .info-item span:last-child{
        overflow: hidden; /* 隐藏超出宽度的内容 */
        white-space: nowrap; /* 禁止文本换行 */
        text-overflow: ellipsis; /* 溢出时添加省略号 */
        width: calc(100% - 110px);
    }
</style>
{/block}

{block name="content"}
<div class="layui-tab layui-tab-card" style="height: 100%;">
    <div class="layui-tab-content" style="height: calc(100% - 40px);">
        <form action="" method="post" class="layui-form layui-card layui-form-pane" autocomplete="off" lay-filter="print_search" onsubmit="return false;" style="box-shadow: none;">
            <div class="layui-col-md5">
                <input type="text" placeholder="请输入快递单号或者合箱单号" class="layui-input" id="search_express_no">
            </div>
            <div class="layui-btn-container layui-col-md5">
                <button class="layui-btn layui-btn-normal" id="search_btn">搜索</button>
            </div>
            <div class="layui-row">
                <fieldset class="layui-elem-field">
                    <legend>包裹信息</legend>
                    <div class="layui-field-box">
                        <div class="layui-row">
                            <div class="layui-col-md6 layui-padding-2 info-item">
                                <span class="layui-inline" style="width: 100px;text-align: right;">所属仓库：</span>
                                <span class="layui-inline" id="warehouse_name"></span>
                            </div>
                            <div class="layui-col-md6 layui-padding-2 info-item">
                                <span class="layui-inline" style="width: 100px;text-align: right;">货位：</span>
                                <span class="layui-inline" id="location_code"></span>
                            </div>
                            <div class="layui-col-md6 layui-padding-2 info-item">
                                <span class="layui-inline" style="width: 100px;text-align: right;">第三方订单号：</span>
                                <span class="layui-inline" id="order_no"></span>
                            </div>
                            <div class="layui-col-md6 layui-padding-2 info-item">
                                <span class="layui-inline" style="width: 100px;text-align: right;">物流名称：</span>
                                <span class="layui-inline" id="express_company"></span>
                            </div>
                            <div class="layui-col-md6 layui-padding-2 info-item">
                                <span class="layui-inline" style="width: 100px;text-align: right;">物流单号：</span>
                                <span class="layui-inline" id="express_no"></span>
                            </div>
                            <div class="layui-col-md6 layui-padding-2 info-item">
                                <span class="layui-inline" style="width: 100px;text-align: right;">订单详情地址：</span>
                                <span class="layui-inline" id="order_detail_url"></span>
                            </div>
                            <div class="layui-col-md6 layui-padding-2 info-item">
                                <span class="layui-inline" style="width: 100px;text-align: right;">发货时间：</span>
                                <span class="layui-inline" id="create_at"></span>
                            </div>
                            <div class="layui-col-md6 layui-padding-2 info-item">
                                <span class="layui-inline" style="width: 100px;text-align: right;">推送时间：</span>
                                <span class="layui-inline" id="confirm_time"></span>
                            </div>
                        </div>
                    </div>
                </fieldset>
            </div>
            <div style="margin-bottom: 50px;">
                <table id="goodsList" lay-filter="goodsList" class="layui-table"></table>
            </div>
            <div class="layui-row">
                <div class="layui-col-md4">
                    <div class="layui-form-item">
                        <label class="layui-form-label label-required-next">货位</label>
                        <div class="layui-input-inline">
                            <select id="select_location_code" lay-search class="layui-select">
                                <option value="">请选择</option>
                            </select>
                        </div>
                    </div>
                </div>
                <div class="layui-col-md4">
                    <div class="layui-input-block">
                        <input type="hidden" id="express_id" value="">
                        <button type="button" class="layui-btn layui-btn-normal" id="confirm_store">确认入库</button>
                    </div>
                </div>
            </div>
        </form>
    </div>
</div>
{/block}
{block name='script'}
<script>
    $(function () {
        let form = layui.form;
        let table = layui.table;
        $('#search_express_no').focus();
        table.render({
            elem: '#goodsList',
            page: false,
            url: '{:url("getExpressGoodsList")}',
            cols: [[
                {type: 'numbers', title: '{:lang("序号")}', align: 'center'},
                {field: 'image', title: '{:lang("图片")}',  align: 'center', templet: "#imgTpl"},
                {field: 'name', title: '{:lang("商品名称")}', align: 'center'},
                {field: 'spec_value', title: '{:lang("商品规格值")}', align: 'center'},
                {field: 'num', title: '{:lang("商品数量")}', align: 'center'},
            ]],
            done: function(res, curr, count) {
                //动态监听表头高度变化，冻结行跟着改变高度
                $(".layui-table-header tr").resize(function() {
                    $(".layui-table-header  tr").each(function (index, val) {
                        $($(".layui-table-fixed .layui-table-header table tr")[index]).height($(val).height());
                    });
                });
                //初始化高度，使得冻结行表头高度一致
                $(".layui-table-header tr").each(function(index, val) {
                    $($(".layui-table-fixed .layui-table-header table tr")[index]).height($(val).height());
                });
                //动态监听表体高度变化，冻结行跟着改变高度
                $(".layui-table-body tr").resize(function() {
                    $(".layui-table-body  tr").each(function (index, val) {
                        $($(".layui-table-fixed .layui-table-body table tr")[index]).height($(val).height());
                    });
                });
                //初始化高度，使得冻结行表体高度一致
                $(".layui-table-body tr").each(function(index, val) {
                    $($(".layui-table-fixed .layui-table-body table tr")[index]).height($(val).height());
                })
            }
        });

        // 搜索包裹
        $('#search_btn').on('click', function() {
            let express_no = $('#search_express_no').val();
            if(!isNotEmpty(express_no)) {
                return false;
            }
            httpRequest('{:url("searchOrder")}', {express_no: express_no}, 'get', function(msg, res) {
                if(isNotEmpty(res.pack_info)) {
                    $('#warehouse_name').text(res.pack_info.warehouse_name);
                    $('#location_code').text(res.pack_info.location_code);
                    $('#order_no').text(res.pack_info.order_no);
                    $('#express_company').text(res.pack_info.express_company);
                    $('#express_no').text(res.pack_info.express_no);
                    $('#order_detail_url').text(res.pack_info.order_detail_url);
                    $('#create_at').text(res.pack_info.create_at);
                    $('#confirm_time').text(res.pack_info.confirm_time);
                    $('#express_id').val(res.pack_info.id);
                    // 更新包裹商品信息
                    table.reload('goodsList', {
                        where: {
                            express_id: res.pack_info.id
                        }
                    });
                }
                if(isNotEmpty(res.location_list)) {
                    let html = '<option value="">请选择</option>';
                    for (let i in res.location_list) {
                        html += '<option value="'+i+'">'+res.location_list[i]+'</option>';
                    }
                    $('#select_location_code').html(html);
                }
                form.render();
            })
        })

        // 确认入库
        $('#confirm_store').on('click', function() {
            let express_id = $('#express_id').val()
            if(!isNotEmpty(express_id)) {
                layer.msg('{:lang("请搜索包裹")}', {icon: 2});
                return false;
            }

            let location_code = $('#select_location_code').val();
            if(isNotEmpty(location_code) && location_code > 0) {
                httpRequest('{:url("confirmStore")}', {location_code: location_code, express_id: $('#express_id').val()}, 'post', function(msg, res) {
                    layer.msg(msg, {icon: 1});
                    setTimeout(function() {
                        location.reload();
                    }, 500)
                })
            } else {
                layer.msg('{:lang("请选择货位")}', {icon: 2});
                return false;
            }
        })
    });
</script>
<!--图片-->
<script type="text/html" id="imgTpl" >
    <img src="{{ d.image }}" class="preview-all" style="max-width: 80px;max-height: 80px;" data-tips-image data-tips-hover >
</script>
{/block}

